<template>
	<view style="width: 100%;min-height: 100vh;background-color: #F3F4F5;">
		<view class="aui-tab" data-ydui-tab>
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;flex-wrap: nowrap;"
			scroll-with-animation>
				<block v-for="(menuTab,index) in menuTabs" >
					<view v-bind:id="'tabNum'+index" 
					:key="index"
					style="width: calc(100% / 6);"
					@click="swichMenu(menuTab.type, index)" 
					:class="[currentTab==index ? 'tab-nav-item tab-active' : 'tab-nav-item']">
						{{menuTab.name}}
					</view>
				</block>
			</scroll-view>
			
			<view class="orderList">
				<view-NoData v-if="list.length==0">
					
				</view-NoData>
				<view v-if="i.goods" class="orderBox" v-for="(i, index) in list" :key="i.id" 
				@click="lookDetail(i.order_no)">
					<view class="orderHeader">
						<view class="orderNum">订单号：{{i.order_no}}</view>
						<view class="status">
							<text v-if="i.status === 0">待支付</text>
							<text v-if="i.status === 1">待挂锁</text>
							<text v-if="i.status === 2">挂锁中</text>
							<text v-if="i.status === 3">已完成</text>
						</view>
					</view>
					<view class="orderContent">
						<image :src="i.goods.images[0]" mode="" class="orderImg"></image>
						<view class="orderInfo">
							<view class="shopName">{{i.goods.name}}</view>
							<!-- <view class="serverName">{{i.serve.name}} <text>x1</text></view> -->
							<view class="serverName" v-if="i.spu_name && i.spu_name != null">规格 <text>{{i.spu_name}}</text></view>
							<view class="shopPrice">{{i.price}}</view>
						</view>
					</view>
					<view class="orderBottom">
						<view class="btns" v-if="i.status === 0" @click.stop="cancelOrder(i, index)">取消订单</view>
						<view class="btns" v-if="i.status === 1 || i.status === 2">联系客服</view>
						<view class="btns orange" v-if="i.status === 2" @click.stop="sureOrder(i, index)">确认收货</view>
						<view class="btns" v-if="i.status === 3" @click.stop="delOrder(i, index)">删除订单</view>
						<view class="btns" v-if="i.status === 4" @click.stop="delOrder(i, index)">删除订单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {orderList, cancelOrder, sureOrder, delOrder} from './request.js'
	export default {
		data() {
			return {
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				menuTabs: [
					{
						name: '全部',
						type: -1
					}, {
						name: '待支付',
						type: 0
					}, {
						name: '待挂锁',
						type: 1
					}, {
						name: '挂锁中',
						type: 2
					}, {
						name: '已完成',
						type: 3
					},
					{
						name: '已取消',
						type: 4
					}
				],
				list: [],
				menuLists: [
					[
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"自营Apple产品专营店",
							"zt":"已取消",
							"img": '../../static/pd-001.png',
							"name":"Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机",
							"sum":"1",
							"pri":"6899.00",
							// 0=没有,1=有,2=标红
							"but_rebuy":2,
							"but_pingjia":1,
							"but_fapiao":1,
							"but_zhifu":0,
							"but_wuliu":0,
							"but_ddshouhuo":0,
						},
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"自营Apple产品专营店",
							"zt":"已取消",
							"img": '../../static/pd-002.png',
							"name":"Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机",
							"sum":"1",
							"pri":"3899.00",
							"but_rebuy":2,
							"but_pingjia":0,
							"but_fapiao":0,
							"but_zhifu":0,
							"but_wuliu":0,
							"but_ddshouhuo":0,
						},
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"自营Apple产品专营店",
							"zt":"已取消",
							"img": '../../static/pd-003.png',
							"name":"Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机Apple 苹果 iPhone8 Plus 4G手机 深空灰 移动联通版64G裸机",
							"sum":"1",
							"pri":"4899.00",
							"but_rebuy":2,
							"but_pingjia":1,
							"but_fapiao":0,
							"but_zhifu":0,
							"but_wuliu":0,
							"but_ddshouhuo":0,
						},
					],
					[
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"SONY京东自营官方旗舰店",
							"zt":"等待付款",
							"img": '../../static/pd-002.png',
							"name":"索尼（SONY）WH-1000XM2 Hi-Res无线蓝牙耳机 智能降噪耳机 头戴式 1000x二代 香槟金",
							"sum":"1",
							"pri":"2899.00",
							"but_rebuy":0,
							"but_pingjia":0,
							"but_fapiao":0,
							"but_zhifu":2,
							"but_wuliu":0,
							"but_ddshouhuo":0,
						}
					],
					[
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"自营FILA产品专营店",
							"zt":"等待收货",
							"img": '../../static/pd-003.png',
							"name":"FILA斐乐男鞋2018夏季新款LOGO轻便复古跑鞋运动鞋男 标准白 41FILA斐乐男鞋2018夏季新款LOGO轻便复古跑鞋运动鞋男 标准白 41FILA斐乐男鞋2018夏季新款LOGO轻便复古跑鞋运动鞋男 标准白 41FILA斐乐男鞋2018夏季新款LOGO轻便复古跑鞋运动鞋男 标准白 41",
							"sum":"1",
							"pri":"5899.00",
							"but_ddshouhuo":2,
							"but_rebuy":1,
							"but_pingjia":0,
							"but_fapiao":0,
							"but_zhifu":0,
							"but_wuliu":1,
						}
					],
					[
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"自营零食产品专营店",
							"zt":"已完成",
							"img": '../../static/pd-004.png',
							"name":"盼盼 酸梅汤 酸梅汁风味饮料 250ml*24盒 整箱 果汁饮料",
							"sum":"1",
							"pri":"21.00",
							"but_rebuy":2,
							"but_pingjia":1,
							"but_fapiao":1,
							"but_zhifu":0,
							"but_wuliu":0,
							"but_ddshouhuo":0,
						}
					],
					[
						{
							"logoimg": '../../static/icon-logo.png',
							"dname":"自营OPPO产品专营店",
							"zt":"已取消",
							"img": '../../static/pd-005.png',
							"name":"OPPO R15 全面屏双摄拍照手机 4G+128G 雪盈白 全网通 移动联通电信4G 双卡双待手机",
							"sum":"1",
							"pri":"21.00",
							"but_rebuy":2,
							"but_pingjia":1,
							"but_fapiao":1,
							"but_zhifu":0,
							"but_wuliu":0,
							"but_ddshouhuo":0,
						}
					],
				],
				listType: 0,
				page: 1
			}
		},
		onLoad(option) {
			// for (var i = 0; i < this.menuLists.length; i++) {
			// 	this.getDateList(i);
			// }
			if (option.type) {
				let index = parseInt(option.type) + 1
				this.setScrollLeft(index);
				this.currentTab = index;
				this.listType = parseInt(option.type)
			}
			this.getOrderList()
		},
		onReachBottom() {
			console.log('到底了')
			if (this.list.length === 0) {
				this.page = 1
			} else {
				this.page++
			}
		},
		methods: {
			getOrderList () {
				if (this.list.length === 0) {
					this.page = 1
				}
				let params = {
					page: this.page
				}
				if (this.listType !== -1) {
					params.status = this.listType
				}
				orderList(params).then(res => {
					if (res.data.code === 1) {
						this.list = [...this.list, ...res.data.data.data]
					}
				})
			},
			swichMenu(type, current) {
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					// this.setScrollLeft(current);
				}
				this.listType = type
				this.page = 1
				this.list = []
				this.getOrderList()
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			getDateList: function(tabIndex) {
				// var entity = this.menuTabs[tabIndex].name;
				// this.menuLists[tabIndex].push(entity);
			},
			lookDetail (id) {
				console.log(id)
				uni.navigateTo({
					url: './orderDetail?id=' + id
				})
			},
			// 取消订单
			cancelOrder (i, index) {
				let params = {
					order_no: i.order_no
				}
				cancelOrder(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						uni.showToast({
							title: '已取消',
							icon: 'none',
							duration: 2000
						})
						this.list.splice(index, 1)
					}
				})
			},
			// 确认收货
			sureOrder (i, index) {
				let params = {
					order_no: i.order_no
				}
				sureOrder(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						uni.showToast({
							title: '已收货',
							icon: 'none',
							duration: 2000
						})
						this.list.splice(index, 1)
					}
				})
			},
			delOrder (i, index) {
				let params = {
					order_no: i.order_no
				}
				delOrder(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						uni.showToast({
							title: '已删除',
							icon: 'none',
							duration: 2000
						})
						this.list.splice(index, 1)
					}
				})
			}
		}
	}
</script>

<style>
	@import '../../css/style.css';
	.aui-tab{
		position: sticky;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 99;
	}
	.btns{
		width: 190rpx;
		height: 58rpx;
		border: 1rpx solid #999999;
		line-height: 190rpx;
		text-align: center;
	}
	.orderList{
		width: 100%;
		background-color: #F3F4F5;
	}
	.orderBox{
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
	.orderHeader{
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 94rpx;
		border-bottom: 1rpx solid #E3E3E3;
	}
	.status{
		color: #FA9700;
		font-size: 28rpx;
	}
	.orderNum{
		color: #333333;
		font-size: 26rpx;
	}
	.orderContent{
		padding: 0 20rpx;
		margin-top: 34rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #E3E3E3;
	}
	.orderImg{
		width: 212rpx;
		height: 212rpx;
		border-radius: 10rpx;
	}
	.orderInfo{
		margin-left: 24rpx;
		width: calc(100% - 236rpx);
		padding-bottom: 28rpx;
	}
	.shopName{
		color: #333333;
		font-size: 28rpx;
	}
	.serverName{
		flex: 1;
		color: #999999;
		font-size: 26rpx;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.shopPrice{
		color: #F7382B;
		font-size: 34rpx;
		margin-top: 24rpx;
	}
	.orderBottom{
		height: 94rpx;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
	}
	.btns{
		width: 190rpx;
		height: 58rpx;
		border: 1rpx solid #999999;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		line-height: 58rpx;
		border-radius: 29rpx;
		margin-left: 20rpx;
	}
</style>
